<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<title>CSS Cascading and Inheritance Level 3 Implementation Report</title>
<style>

/** General Text Styling ******************************************************/

html {
  font-family: sans-serif;
  line-height: 1.5;
  margin: 0.5em 4%;
  padding: 0 0.5em;
}
body {
  margin: 0; padding: 2rem;
}

h1, h2, h3, h4 {
  color: navy;
  line-height: 1;
  margin: 3rem 0 1rem -2rem;
}
h1:first-child {
  margin-top: 0;
}

aside {
  font-style: italic;
}
p.annotation {
  text-align: right;
  text-align: end;
  font-style: italic;
}

dt {
  font-weight: bold;
}
dd {
  margin-bottom: 1em;
}

ul {
  list-style-type: circle;
}

code {
  font: inherit;
  font-style: italic;
}

:link, :visited {
  color: navy;
}

/** Data tables ***************************************************************/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
		text-align: center;
	}

	table.data {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		border-bottom: none;
		width: 100%;
		font-size: 90%;
	}
	table.data caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data tr {
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}
	table.data thead,
	table.data tbody {
		border-bottom: 2px solid gray;
	}

	table.data td, table.data th {
		padding: 0.25em 1em;
		vertical-align: baseline;
	}
	table.data thead td:empty {
		padding: 0;
		border: 0;
	}


	table.data tbody th,
	table.data td:first-child {
		font: inherit;
		text-align: left;
	}
	table.data th[scope=rowgroup] {
		font-weight: bold;
		background: #EEE;
	}
	table.data img {
		vertical-align: middle;
	}
</style>


<h1>CSS Cascading and Inheritance Level 3 Implementation Report</h1>
<p class="annotation">Last updated <time>2020-08-25</time>

	<p>The following new features were added in Level 3:

	<table class=data>
	<thead>
		<tr>
			<th>Feature
			<th>Gecko
			<th>Blink
			<th>WebKit
			<th>EdgeHTML
	<tbody>
		<tr>
			<th><a href="#all"><code>all</code> shorthand</a>
			<td>27+
			<td>37+
			<td>525+
			<td>×
		<tr>
			<th><a href="#initial"><code>initial</code> keyword</a>
			<td>19+
			<td>28+
			<td>532+
			<td>12+
	<!-- CSS2
		<tr>
			<th><a href="#unset"><code>inherit</code> keyword</a>
			<td>1.8.1+
			<td>28+
			<td>525+
			<td>12+
	-->
		<tr>
			<th><a href="#unset"><code>unset</code> keyword</a>
			<td>27+
			<td>41+
			<td>601.5+
			<td>13+
	</table>

	<p class="annotation"><small>Version data sourced from <a href="https://caniuse.com/">caniuse.com</a> and <a href="https://en.wikipedia.org/">Wikipedia</a></small>

	<p>The following module integrations were defined in Level 3:

	<table class=data>
	<thead>
		<tr>
			<th>Feature
			<th>Gecko
			<th>Blink
			<th>WebKit
			<th>EdgeHTML
	<tbody>
		<tr>
			<th><a href="#mq-import">Media Queries + @import</a>
			<td>○
			<td>○
			<td>○
			<td>○
		<tr>
			<th><a href="#animations">Animations + Cascade</a>
			<td>○
			<td>○
			<td>×
			<td>?
		<tr>
			<th><a href="#transitions">Transitions + Cascade</a>
			<td>○
			<td>○
			<td>○
			<td>○
	</table>

<h2 id=details>
Detailed Testing</h2>

	<p>Tables below include Gecko, Blink, and WebKit results for Level 3 features.

	<table class=data>
	<thead>
		<tr>
			<th>Test
			<th>Interop?
			<th>Results
			<th>Live

	<tbody id=all>
		<tr><th scope=rowgroup colspan=4>
			<a href="https://www.w3.org/TR/css-cascade-3/#all-shorthand"><code>all</code> Shorthand</a>
		<tr>
			<th><code>all</code> does not set <code>direction</code> or <code>unicode-bidi</code>
			<td>○
			<td><a href="https://wpt.fyi/results/css/css-cascade/all-prop-001.html">3/3 Pass</a>
			<td><a href="https://wpt.live/css/css-cascade/all-prop-001.html">Test</a>
		<tr>
			<th><code>all</code> does set <code>display</code>
			<td>○
			<td><a href="https://wpt.fyi/results/css/css-cascade/all-prop-002.html">3/3 Pass</a>
			<td><a href="https://wpt.live/css/css-cascade/all-prop-002.html">Test</a>
		<tr>
			<th><code>all: inherit</code> is overridden by subsequent declarations
			<td>○
			<td><a href="https://wpt.fyi/results/css/css-cascade/all-prop-inherit-color.html">3/3 Pass</a>
			<td><a href="https://wpt.live/css/css-cascade/all-prop-inherit-color.html">Test</a>
		<tr>
			<th><code>all: initial</code> is overridden by subsequent declarations
			<td>○
			<td><a href="https://wpt.fyi/results/css/css-cascade/all-prop-initial-color.html">3/3 Pass</a>
			<td><a href="https://wpt.live/css/css-cascade/all-prop-initial-color.html">Test</a>
		<tr>
			<th><code>all: unset</code> is overridden by subsequent declarations
			<td>○
			<td><a href="https://wpt.fyi/results/css/css-cascade/all-prop-unset-color.html">3/3 Pass</a>
			<td><a href="https://wpt.live/css/css-cascade/all-prop-unset-color.html">Test</a>

	<tbody id=initial>
		<tr><th colspan=4 scope=rowgroup>
			<a href="https://www.w3.org/TR/css-cascade-3/#initial"><code>initial</code> Keyword</a>
		<tr>
			<th><code>initial</code> sets inherited and uninherited properties to their initial value
			<td>○
			<td><a href="https://wpt.fyi/results/css/css-cascade/initial-color-background-001.html">3/3 Pass</a>
			<td><a href="https://wpt.live/css/css-cascade/initial-color-background-001.html">Test</a>

	<tbody id=unset>
		<tr><th colspan=4 scope=rowgroup>
			<a href="https://www.w3.org/TR/css-cascade-3/#unset"><code>unset</code> Keyword</a>
		<tr>
			<th><code>unset</code> sets inherited properties to inherit,
				and uninherited properties to their initial value
			<td>○
			<td><a href="https://wpt.fyi/results/css/css-cascade/unset-val-001.html">3/3 Pass</a>
			<td><a href="https://wpt.live/css/css-cascade/unset-val-001.html">Test</a>
		<tr>
			<th><code>unset</code> sets uninherited properties to their initial value
				despite UA style sheet declarations to the contrary
			<td>○
			<td><a href="https://wpt.fyi/results/css/css-cascade/unset-val-002.html">3/3 Pass</a>
			<td><a href="https://wpt.live/css/css-cascade/unset-val-002.html">Test</a>

	<tbody id=mq-import>
		<tr><th colspan=4 scope=rowgroup>
			<a href="https://www.w3.org/TR/css3-mediaqueries/">Media Queries</a> + <a href="https://www.w3.org/TR/css-cascade-3/#at-import">@import</a> Integration
		<tr>
			<th><code>@import</code> rules with simple <a href="https://www.w3.org/TR/css3-mediaqueries/">media queries</a> are supported
			<td>○
			<td><a href="https://wpt.fyi/results/css/css-cascade/import-conditional-001.html">3/3 Pass</a>
			<td><a href="https://wpt.live/css/css-cascade/import-conditional-001.html">Test</a>

	<tbody id=animations>
		<tr><th colspan=4 scope=rowgroup>
			<a href="https://www.w3.org/TR/css-animations-1/">Animations</a> + <a href="https://www.w3.org/TR/css-cascade-3/#cascading">Cascade</a> Integration
		<tr>
			<th>Author non-<code>!important</code> is overridden by animation
			<td>○
			<td><a href="https://wpt.fyi/results/css/css-cascade/important-prop.html">3/3 Pass</a>
			<td><a href="https://wpt.live/css/css-cascade/important-prop.html">Test</a>
		<tr>
			<th>Author <code>!important</code> overrides animation
			<td>△
			<td><a href="https://wpt.fyi/results/css/css-cascade/important-prop.html">2/3 Pass</a>
			<td><a href="https://wpt.live/css/css-cascade/important-prop.html">Test</a>
		<tr>
			<th><code>!important</code> is invalid in <code>@keyframes</code>
			<td>○
			<td><a href="https://wpt.fyi/results/css/css-cascade/important-prop.html">3/3 Pass</a>
			<td><a href="https://wpt.live/css/css-cascade/important-prop.html">Test</a>

<tbody id=transitions>
		<tr><th colspan=4 scope=rowgroup>
			<a href="https://www.w3.org/TR/css-transitions-1/">Transitions</a> + <a href="https://www.w3.org/TR/css-cascade-3/#cascading">Cascade</a> Integration
		<tr>
			<th>Transitions work across importance levels
			<td>○
			<td>3/3 Pass
			<td><a href="https://wpt.live/css/css-cascade/important-transition-manual.html">Test</a>
	</table>

<h2 id=untested>
Untested</h2>

	<p>The following test could be written in theory, but would require special configuration of the user agent:
	<ul>
		<li>Transitions work across <code>!important</code> levels of user and user-agent origins.
	</ul>

	<p>The following tests could be written in theory, but correct behavior is implied
	by passing the <a href="http://wpt.live/css/CSS2/cascade/">CSS2 user-stylesheet tests</a> together with the Level 3 tests:
	<ul>
		<li>User and user-agent non-<code>!important</code> are overridden by animations
		<li>User and user-agent <code>!important</code> overrides animations
	</ul>
